import type { Config } from 'tailwindcss'

// 自定义颜色配置
const customColors = {
  foreground: {
    placeholder: 'var(--foreground-placeholder)' /* 占位符文本颜色，使用 CSS 变量 */,
    disabled: 'var(--foreground-disabled)' /* 禁用状态文本颜色，使用 CSS 变量 */,
    DEFAULT: 'var(--foreground)' /* 主文本颜色，使用 CSS 变量 */
  },
  // 深背景色，适用于深色模式或重要区域的背景
  background: {
    deep: 'var(--background-deep)', // 深背景色
    disabled: 'var(--background-disabled)' /* 禁用状态背景颜色 */,
    DEFAULT: 'var(--background)' // 默认背景色
  },
  // 默认边框色，适用于常规边框
  border: {
    light: 'var(--border-light)' /* 浅边框颜色，使用 CSS 变量 */,
    lighter: 'var(--border-lighter)' /* 更浅边框颜色，使用 CSS 变量 */,
    dark: 'var(--border-dark)' /* 深边框颜色，使用 CSS 变量 */,
    darker: 'var(--border-darker)' /* 更深边框颜色，使用 CSS 变量 */,
    DEFAULT: 'var(--border)' // 默认边框色
  },
  // 次要颜色，适用于次要操作和元素
  secondary: {
    DEFAULT: 'var(--secondary)', // 默认次要色
    foreground: 'var(--secondary-foreground)' // 次要前景色
  },
  // 缓和色，通常用于非活跃元素
  muted: {
    DEFAULT: 'var(--muted)', // 缓和颜色
    foreground: 'var(--muted-foreground)' // 缓和状态的前景色
  },
  // 强调颜色，用于主要的视觉元素
  accent: {
    DEFAULT: 'var(--accent)', // 强调颜色
    foreground: 'var(--accent-foreground)' // 强调色上的前景文本颜色
  },
  // 用于元素获得焦点时显示的焦点环效果
  ring: 'var(--ring)',
  // 覆盖层的颜色
  overlay: {
    DEFAULT: 'var(--overlay)', // 覆盖层颜色
    content: 'var(--overlay-content)' // 覆盖层内容颜色
  },
  // 主要颜色调色板，用于主要操作和重要视觉元素
  primary: {
    DEFAULT: 'var(--primary)' // 默认主色
  },
  // 成功状态的颜色调色板
  success: {
    DEFAULT: 'var(--success)' // 默认成功颜色
  },
  // 警告状态的颜色调色板
  warning: {
    DEFAULT: 'var(--warning)' // 默认警告颜色
  },
  // 销毁操作的颜色调色板
  error: {
    DEFAULT: 'var(--error)' // 默认销毁颜色
  }
}

// Tailwind CSS 配置
export default {
  content: [
    './index.html', // 指向 HTML 文件
    './src/**/*.{vue,js,ts,jsx,tsx}' // 指向 Vue、JavaScript、TypeScript 文件
  ],
  darkMode: 'selector', // 使用选择器来切换暗黑模式
  plugins: [],
  prefix: '', // 可选的 CSS 类前缀
  safelist: ['dark'], // 允许在任何情况下使用的类
  theme: {
    extend: {
      fontSize: {
        xs: '8px', // 超小字体，用于小型文本或标签
        sm: '10px', // 小字体，适合辅助文本
        md: '12px', // 中字体，常规文本使用
        DEFAULT: '14px', // 默认字体，主要文本使用
        lg: '16px', // 大字体，标题或重要文本
        xl: '18px', // 超大字体，用于大标题
        '2xl': '20px', // 超超大字体，强调文本
        '3xl': '22px', // 特大字体，醒目的文本
        '4xl': '24px', // 四倍超大字体，显著强调
        '5xl': '26px', // 五倍超大字体，特殊用途
        '6xl': '28px', // 六倍超大字体，主要视觉焦点
        '7xl': '30px', // 七倍超大字体，重要视觉元素
        '8xl': '32px', // 八倍超大字体，极大文本
        '9xl': '34px', // 九倍超大字体，超大文本
        '10xl': '36px', // 十倍超大字体，极为显著
        '11xl': '38px', // 十一倍超大字体，强调重要内容
        '12xl': '40px' // 十二倍超大字体，最重要的文本
      },
      borderRadius: {
        '2xs': 'var(--radius-2xs)' /* 小圆角，使用 CSS 变量 */,
        xs: 'var(--radius-xs)' /* 中等圆角，使用 CSS 变量 */,
        base: 'var(--radius)' /* 基础圆角，使用 CSS 变量 */,
        xl: 'var(--radius-xl)' /* 大圆角，使用 CSS 变量 */,
        '2xl': 'var(--radius-2xl)' /* 大圆角，使用 CSS 变量 */,
        round: 'var(--radius-round)' /* 圆形圆角，使用 CSS 变量 */,
        full: 'var(--radius-full)' /* 完全圆角 (圆形)，使用 CSS 变量 */
      },
      colors: {
        ...customColors // 使用自定义颜色
      }
    }
  }
} as Config
